<style lang="less">
.PropertyMangeDetail{
  .productDetailBox {
    width: 100%;
    height: 3.4rem;
    background-color: #3d477b;
    color: #fff;
    h3 {
      padding: .3rem .3rem 0;
      height: .6rem;
      font-size: .28rem;
    }
    .chart {
      margin-top: .3rem;
      padding: 0 .14rem .3rem;
      display: flex;
      .item {
        flex: 1;
        padding: 0 .16rem;
        border-right: 1px solid #bfbfbf;
        strong {
          // todo 此处需要用到 PingFang-SC-Bold 字体
          display: block;
          font-weight: normal;
          font-size: .4rem;
        }
        span {
          display: block;
          font-size: .2rem;
        }
      }
      :last-child {
        border-right: 0 none;
      }
      & .red {
        color: #f63;
      }
    }
    .chartInfo {
      padding: .1rem .3rem 0;
      dfn {
        position: relative;
        display: block;
        height: .16rem;
        background-color: rgba(255,255,255,.5);
        border-radius: .04rem;
        i {
          position: absolute;
          width: 2.4rem;
          height: .16rem;
          border-radius: .04rem;
          background-color: rgba(255,255,255,1);
        }
      }
      p {
        margin-top: .2rem;
        font-size: .2rem;
      }
    }
  }
  .detailInfo {
    margin-top: .2rem;
    padding: 0 .3rem .2rem;
    background-color: #fff;
    margin-bottom: .2rem;
    h2 {
      font-size: .3rem;
      line-height: .8rem;
      border-bottom: 1px solid #eaeaea;
      font-weight: bold;
    }
    .detailMain {
      padding: .16rem 0;
      dl {
        display: flex;
        line-height: .6rem;
        dt {
          width: 2.2rem;
          color: #999;
        }
        dd {
          flex: 1;
          text-align: right;
        }
      }
    }
  }
  .product-info{
    font-weight: bold;
    font-size: .28rem;
    height:.88rem;
    line-height:.88rem!important;
    padding:0px 0.29rem 0px 0.31rem;
    background-color: #FFF;
  }
  .manage-detail-btn{
    width:100%;
    height:1rem;
    font-size:.34rem;
    // position:fixed;
    // bottom:0;
    border-top: 1px solid #EAEAEA;
    &>div{
      float:left;
      line-height: 1rem;
      text-align: center;
    }
    &>div:nth-of-type(1){
      width: 2.5rem;
      background-color: #FFFFFFFF;
      color:#333333;
      border-right: 1px solid #EAEAEA;
    }
    &>div:nth-of-type(2){
      width: 2.5rem;
      background-color: #FFFFFFFF;
      color:#EC1B30;
      border-right: 1px solid #EAEAEA;
    }
    &>div:nth-of-type(3){
      width: 2.4rem;
      background-color: #EC1B30;
      color:#FFFFFFFF;
    }
  }
  .deal{
    margin-top: 0.28rem;
    padding-left: 0.3rem;
    overflow: hidden;
    margin-bottom: .5rem;
    &>p{
      float: left;
      width:6.43rem;
      font-size:0.22rem;
      line-height: 0.35rem;
      color: #ccc;
      .dealCheck{
        color: #3333ff;
      }
    }
    &>i{
      float: left;
      margin-left: 0px;
      margin-right: 0.15rem;
      &>img{
        vertical-align: top;
        width: 100%;
        height: auto;
      }
    }
  }
  .select{
    position: relative;
    display: inline-block;
    width: 0.28rem;
    height: 0.28rem;
    border: 1px solid #bfbfbf;
    margin-left:0.6rem;
    margin-right:0.21rem;
    vertical-align: top;
    &>img{
      position:absolute;
      top: 0px;
      left: 0px;
      width: 100%;
    }
  }
}
</style>
<template>
  <div class="dy-main PropertyMangeDetail">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">资管详情</x-header>
    <!-- <x-header right-options="{showMore: true}" @on-click-more="showMenus = true">资管详情</x-header> -->
    </div>
    <div class="dy-body">
      <div class="dy-wapper">
        <scroller lock-x style= 'height: 100%;'>
          <div class="scroller-box">
            <div class="productDetailBox">
              <h3>{{financialData.name}}</h3>
              <div class="chart">
                <div class="item red">
                  <strong>{{financialData.rate}}</strong>
                  <span>参考市值</span>
                </div>
                <div class="item">
                  <strong>{{financialData.profit}}</strong>
                  <span>最新单位净值</span>
                </div>
                <div class="item">
                  <strong>{{financialData.term}}</strong>
                  <span>风险等级</span>
                </div>
              </div>
              <div class="chartInfo">
                <dfn class="progressBar">
                  <i></i>
                </dfn>
                <p>可购剩余额度 {{financialData.availableCredit}}元 可购总额度 {{financialData.totalAmountOfPurchase}}元</p>
              </div>
            </div>
            <div class="detailInfo">
              <h2>产品介绍</h2>
              <div class="detailMain">
                <dl>
                  <dt>产品代码</dt>
                  <dd>{{financialData.list.subTime}}</dd>
                </dl>
                <dl>
                  <dt>产品管理人</dt>
                  <dd>{{financialData.list.productName}}</dd>
                </dl>
                <dl>
                  <dt>产品币种</dt>
                  <dd>{{financialData.list.productType}}</dd>
                </dl>
                <dl>
                  <dt>计价币种</dt>
                  <dd>{{financialData.list.currency}}</dd>
                </dl>
                <dl>
                  <dt>最低购买金额</dt>
                  <dd>{{financialData.list.deliveryTime}}</dd>
                </dl>
                <dl>
                  <dt>产品到期日期</dt>
                  <dd>{{financialData.list.expireTime}}</dd>
                </dl>
                <dl>
                  <dt>最低购买金额</dt>
                  <dd>{{financialData.list.minBuyMoney}}</dd>
                </dl>
                <dl>
                  <dt>递增金额</dt>
                  <dd>{{financialData.list.increaseMoney}}</dd>
                </dl>
                <dl>
                  <dt>是否保本</dt>
                  <dd>{{financialData.list.saveBook}}</dd>
                </dl>
                <dl>
                  <dt>风险等级</dt>
                  <dd>{{financialData.list.RiskGrade}}</dd>
                </dl>
                <dl>
                  <dt>最新产品市值</dt>
                  <dd>{{financialData.list.newrate}}</dd>
                </dl>
                <dl>
                  <dt>分红方式</dt>
                  <dd>{{financialData.list.RiskGrade_1}}</dd>
                </dl>
                <dl>
                  <dt>手续费率</dt>
                  <dd>{{financialData.list.ServicCharge}}</dd>
                </dl>
              </div>
            </div>
            <group>
              <cell class="product-info" :title="aaa" :link="{path:'/PropertyDetail'}" inline-desc='盈亏状况'></cell>
            </group>
            <div class="deal">
              <i class='select' @click='readClick'><img src="../../assets/img/Financial/selected.png" alt="" v-show="readOver"></i>
              <p>我已阅读<a href="javascript:void(0)" class="dealCheck">《东亚银行理财产品协议书》</a></p>
            </div>

            <div class="manage-detail-btn">
              <div @click='gotoNext("PropertyDetail")'>赎回</div>
              <div  @click='gotoNext("PropertyInformation")'>分红设置</div>
              <div  @click='gotoNext("PropertyToBuy")'>购买</div>
            </div>
          </div>
        </scroller>
      </div>
    </div>
  </div>
</template>
<script>
import { Confirm, Group, XSwitch, XButton } from 'vux'
export default {
  components: {
    Confirm,
    Group,
    XSwitch,
    XButton
  },
  data () {
    return {
      financialData: {
        name: '“芙蓉锦程.汇得益”2018年24号', // 理财产品名
        rate: '7.7777', // 参考市值
        profit: '11.222', // 最新单位净值
        term: '高', // 风险等级
        availableCredit: '20,000.00', // 可购剩余额度
        totalAmountOfPurchase: '100,000.00', // 可购总额度
        list: {
          subTime: '123234', // 产品代码
          productName: '会得以', // 产品管理人
          productType: '债券型', // 产品币种
          currency: '人民币', // 计价币种
          deliveryTime: '5678', // 最低购买金额
          expireTime: '2017/08/01', // 产品到期日期
          minBuyMoney: '3806', // 最低购买金额
          increaseMoney: '1000', // 递增金额
          saveBook: '否', // 是否保本
          RiskGrade: '1级', // 风险等级
          newrate: '7.2341', // 最新产品市值
          RiskGrade_1: '现金分红', // 风险等级
          ServicCharge: '2.13%' // 风险等级
        }},
      readOver: 1, // 我已阅读协议
      buttonTxt: '购买' // 判断获得： 1.购买；2.去开户
    }
  },
  methods: {
    back () {
      // alert('6789')
      this.$publicFun.goBack(this)
    },
    getFinancialData () {
      let LVm = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business',
          'params': {'method_Name': 'showProDetail', 'basic_Data': {'productId': '3015'}}
        }),
        function (response) {
          LVm.aaa = JSON.stringify(response)
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            LVm.financialData = response.data.data[0]
          } else {
            console.log('fail')
          }
        })
    },
    readClick: function (e) {
      let n = this.readOver
      if (n === 1) {
        this.readOver = 0
      } else {
        this.readOver = 1
      }
    },
    gotoNext (Name) {
      this.$router.push({name: Name})
    }
  },
  created () {
    this.getFinancialData()
  }
}
</script>
